<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片回到顶部特效</title>
    <style>
        /* 基本样式保持不变 */
        body {
            height: 2000px;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        .content {
            padding: 20px;
        }
        
        /* 修改按钮样式为图片容器 */
        #back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;  /* 调整为图片大小 */
            height: 60px;
            cursor: pointer;
            display: none;
            opacity: 0.7;
            transition: opacity 0.3s;
            z-index: 999;
            border: none;
            background: none; /* 移除背景色 */
            padding: 0;
            overflow: hidden;
            border-radius: 50%; /* 保持圆形 */
        }
        
        #back-to-top:hover {
            opacity: 1;
        }
        
        /* 图片样式 */
        #back-to-top img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>页面内容</h1>
        <p>向下滚动页面，会出现图片"回到顶部"按钮...</p >
    </div>
    
    <!-- 修改为包含图片的按钮 -->
    <button id="back-to-top" title="回到顶部">
        <img src="huojian.png" alt="回到顶部">
        <!-- 替换src为你的图片URL -->
    </button>
    
    <script>
        // JavaScript保持不变
        const backToTopButton = document.getElementById("back-to-top");
        
        window.addEventListener("scroll", function() {
            if (window.pageYOffset > 300) {
                backToTopButton.style.display = "block";
            } else {
                backToTopButton.style.display = "none";
            }
        });
        
        backToTopButton.addEventListener("click", function() {
            window.scrollTo({
                top: 0,behavior: "smooth"
            });
        });
    </script>
</body>
</html>